<template>
  <!-- 推荐音乐 -->
  <uni-section padding title="推荐歌单" type="line" titleFontSize="20px" style="background-color: #f7f7f700;">
    <uni-grid :column="3" :Boolean="true" :showBorder="false">
      <uni-grid-item v-for="(item, index) in recommendList" :key="index" style="margin: 5px 0px;"
        @click="recommendClick()">
        <image mode="scaleToFill" :src="item.picUrl" style="width:96%;"></image>
        <text class="text" style="text-align: center;">{{item.name}}</text>
      </uni-grid-item>
    </uni-grid>
  </uni-section>
  <!-- 最新音乐 -->
  <uni-section title="最新音乐" type="line" titleFontSize="20px" style="background-color: #f7f7f700;">
  </uni-section>
  <uni-section v-for="(item,index) in newList" :title="item.name" :subTitle="item.alg" titleFontSize="16px"
    subTitleFontSize="12px" style="margin: 6px 0px;" @click="onChange(item)">
    <template v-slot:right>
      <uni-icons type="headphones" size="30"></uni-icons>
    </template>
  </uni-section>
</template>

<script>
  import {
    recommendMusicAPI,
    newMusicAPI
  } from '../../api/index.js'
  import {
    reactive,
    toRefs,
    onMounted,
    ref
  } from 'vue'
  import {
    onReachBottom,
    onPullDownRefresh
  } from '@dcloudio/uni-app'
  export default {
    setup() {
      const data = reactive({
        recommendList: [],
        newList: []
      })
      // 页面
      let pageNum = 1
      //初始化获取歌单数据
      onMounted(async () => {
        const recommendRus = await recommendMusicAPI(6)
        data.recommendList = recommendRus.data.result
        const newRus = await newMusicAPI(10 * pageNum)
        data.newList = newRus.data.result
      })
      //触底加载更多
      onReachBottom(async () => {
        pageNum += 1
        const newRus = await newMusicAPI(10 * pageNum)
        data.newList = newRus.data.result
      })
      // 上拉刷新
      onPullDownRefresh(async () => {
        const recommendRus = await recommendMusicAPI(6)
        data.recommendList = recommendRus.data.result
        // 上拉刷新完毕
        uni.stopPullDownRefresh()
      })
      // 点击最新音乐跳转
      const onChange = (item) => {
        uni.navigateTo({
          url: '/subpkg/play/play?id=' + item.id
        })
        console.log(item)
      }
      // 点击推荐歌单
      const recommendClick = () => {
        uni.$showMsg('推荐歌单暂未开放 ~')
      }
      return {
        ...toRefs(data),
        onChange,
        recommendClick
      }
    }
  }
</script>

<style lang="scss">
  .text {
    height: 38px;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
</style>
